<template>
  <view class="order-detail-container">
    <!-- 添加导航栏 -->
    <view class="navbar">
      <view class="nav-left" @click="goBack">
        <text class="nav-back-icon">&#xe600;</text>
        <text class="nav-back-text">返回</text>
      </view>
      <view class="nav-title">订单详情</view>
      <view class="nav-right"></view>
    </view>
    <!-- 内容区域 -->
    <scroll-view scroll-y class="scroll-area">
      <!-- 基本信息 -->
      <view class="info-card" v-if="order">
        <view class="card-title">订单信息</view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ order.orderNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">下单时间</text>
          <text class="value">{{ formatDate(order.createTime) }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单状态</text>
          <text class="value status">{{ displayStatusText }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付状态</text>
          <text class="value">{{ payStatusText }}</text>
        </view>
      </view>
      <!-- 金额信息 -->
      <view class="info-card mt-20">
        <view class="card-title">金额信息</view>
        <view class="info-item">
          <text class="label">订单金额</text>
          <text class="value">￥{{ formatAmount(order.totalAmount) }}</text>
        </view>
        <view class="info-item">
          <text class="label">优惠金额</text>
          <text class="value">-￥{{ formatAmount(order.discountAmount) }}</text>
        </view>
        <view class="info-item total">
          <text class="label">系统抵扣</text>
          <text class="value">-￥{{ formatAmount(order.systemDeduction) }}</text>
        </view>
        <view class="info-item total">
          <text class="label">实付金额</text>
          <text class="value">￥{{ formatAmount(order.actualAmount) }}</text>
        </view>
      </view>

      <!-- 支付信息 -->
      <view class="info-card mt-20">
        <view class="card-title">支付信息</view>
        <view class="info-item">
          <text class="label">支付单号</text>
          <text class="value">{{ order.transactionId || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付时间</text>
          <text class="value">{{ order.payTime ? formatDate(order.payTime) : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">更新时间</text>
          <text class="value">{{ order.updateTime ? formatDate(order.updateTime) : '-' }}</text>
        </view>
      </view>

      <!-- 买家信息 -->
      <view class="info-card mt-20">
        <view class="card-title">买家信息</view>
        <view class="info-item">
          <text class="label">姓名</text>
          <text class="value">{{ order.name || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机</text>
          <text class="value">{{ order.phone || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">邮箱</text>
          <text class="value">{{ order.email || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="label">备注</text>
          <text class="value">{{ order.remark || '-' }}</text>
        </view>
      </view>

      <!-- 发票信息 -->
      <view class="info-card mt-20">
        <view class="card-title">发票</view>
        <view class="info-item">
          <text class="label">是否开票</text>
          <text class="value">{{ order.invoice ? '需要' : '不需要' }}</text>
        </view>
        <view class="info-item">
          <text class="label">发票信息</text>
          <text class="value">{{ order.invoiceInfo || '-' }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <up-button v-if="showCancel" class="cancel-btn" type="error" plain shape="circle" size="small"
        @click="cancelOrder">
        取消订单
      </up-button>
      <up-button v-if="showPay" class="pay-btn" type="primary" shape="circle" size="small" @click="payOrder">
        去支付
      </up-button>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request';

export default {
  data() {
    return {
      orderId: '',
      order: {
        id: '',
        orderNo: '',
        userId: null,
        wxOpenid: '',
        totalAmount: 0,
        actualAmount: 0,
        discountAmount: 0,
        systemDeduction: 0,
        status: 0,
        payStatus: 0,
        deliveryStatus: 0,
        refundStatus: 0,
        transactionId: null,
        createTime: '',
        updateTime: '',
        payTime: '',
        name: '',
        phone: '',
        email: '',
        remark: '',
        invoice: false,
        invoiceInfo: ''
      },
      defaultImg: '/static/logo.png'
    };
  },

  computed: {
    displayStatusText() {
      const statusMap = {
        0: '待确认',
        1: '已确认',
        2: '已取消',
        3: '已完成',
        4: '已关闭',
        5: '已取消',
        6: '退款中',
        7: '已退款'
      };
      return statusMap[this.order?.status] ?? '未知状态';
    },
    payStatusText() {
      const payMap = {
        0: '未支付',
        1: '已支付',
        2: '支付失败',
        3: '退款中',
        4: '已退款'
      };
      return payMap[this.order?.payStatus] ?? '未知';
    },
    showPay() {
      return this.order && this.order.payStatus === 0 && this.order.status == 0;
    },
    showCancel() {
      return this.order && this.order.status === 0 && this.order.payStatus === 0;
    }
  },

  onLoad(options) {
    if (options.orderId) {
      console.log('orderId', options.orderId);
      this.orderId = options.orderId;
      this.loadOrderDetail();
    }
  },

  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    async loadOrderDetail() {
      try {
        uni.showLoading({ title: '加载中...' });
        const res = await request({
          url: `/orders/getOrderById/${this.orderId}`,
          method: 'GET'
        });
        uni.hideLoading();
        if (res && res.data) {
          this.order = res.data;
          console.log('订单详情', this.order);
        }
      } catch (err) {
        uni.hideLoading();
        console.error('加载订单失败', err);
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    },
    cancelOrder() {
      uni.showToast({ title: '取消订单功能待实现', icon: 'none' });
    },
    payOrder() {
      uni.showToast({ title: '支付功能待实现', icon: 'none' });
    },
    formatAmount(amount) {
      const num = Number(amount || 0);
      return num.toFixed(2);
    },
    formatDate(isoString) {
      if (!isoString) return '-';
      const date = new Date(isoString);
      if (Number.isNaN(date.getTime())) return isoString;
      const pad = (n) => (n < 10 ? `0${n}` : `${n}`);
      const yyyy = date.getFullYear();
      const MM = pad(date.getMonth() + 1);
      const dd = pad(date.getDate());
      const hh = pad(date.getHours());
      const mm = pad(date.getMinutes());
      const ss = pad(date.getSeconds());
      return `${yyyy}-${MM}-${dd} ${hh}:${mm}:${ss}`;
    }
  }
};
</script>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  box-sizing: border-box;
}

/* 添加导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  background-color: #ff6700;
  position: relative;
  z-index: 999;
}

.nav-left {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 30rpx;
}

.nav-back-icon {
  font-family: "iconfont" !important;
  font-size: 32rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-back-text {
  margin-left: 8rpx;
  font-size: 30rpx;
  color: #fff;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
}

.nav-right {
  width: 80rpx;
}

.scroll-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 卡片水平居中 */
  padding: 24rpx 24rpx 140rpx;
  /* 预留底部操作栏空间 */
  box-sizing: border-box;
}

.info-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 700rpx;
  /* 限制卡片最大宽度，保持居中美观 */
  margin: 0 0 20rpx 0;
  box-sizing: border-box;
}

.mt-20 {
  margin-top: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  color: #999;
}

.info-item .value {
  color: #333;
}

.info-item.total .value {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff6700;
}

.status {
  color: #ff6700;
}

.product-info {
  display: flex;
  align-items: center;
}

.product-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.product-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.product-sub {
  font-size: 26rpx;
  color: #666;
  margin-top: 4rpx;
}

.camper-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.camper-name {
  margin-left: 12rpx;
}

.add-camper-btn {
  display: flex;
  align-items: center;
  color: #ff6700;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 40rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.cancel-btn {
  flex: 1;
  margin-right: 20rpx;
}

.pay-btn {
  flex: 1;
  background-color: #ff6700 !important;
  color: #fff !important;
}
</style>
